<template>
    <UserView>
        <div><h2>用户信息</h2></div>
        <div class="card" v-if="!to_modifyed && to_safetied === false">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    <div class="col-5">
                        <div class="flex-container">
                            <div class="flex-container-item">学号:</div>
                            <input type="text" class="form-control" :placeholder="$store.state.user.username" disabled>
                        </div>
                        <div class="flex-container">
                            <div class="flex-container-item">学院:</div>
                            <input type="text" class="form-control" :placeholder="$store.state.user.collegename" disabled>
                        </div>
                        <div class="flex-container">
                            <div class="flex-container-item">班级:</div>
                            <input type="text" class="form-control" :placeholder="$store.state.user.classname" disabled>
                        </div>
                        <div class="flex-container">
                            <div class="flex-container-item">昵称:</div>
                            <input type="text" class="form-control" :placeholder="$store.state.user.nickname" disabled>
                        </div>
                        <button type="button" class="btn btn-danger" @click="to_modify_info">修改个人信息</button>
                        <button type="button" class="btn btn-warning" @click="to_safety">安全中心</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" v-if="to_safetied === true">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    <div class="col-5">
                        <div class="mb-3">
                            <input type="password" class="form-control" placeholder="请输入旧密码" v-model="new_old_password">
                        </div>
                        <div class="mb-3">
                            <input type="password" class="form-control" placeholder="请输入新密码" v-model="new_password">
                        </div>
                        <div class="mb-3">
                            <input type="password" class="form-control" placeholder="请确认新密码" v-model="new_password_confirm">
                        </div>
                        <div class="error_info">{{ error_info }}</div>
                        <button type="button" class="btn btn-info" @click="confirm_to_safety">确认修改</button>
                        <button type="button" class="btn btn-danger" @click="to_cancel_safe">取消修改</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" v-if="to_modifyed">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    <div class="col-5">
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="inputGroupSelect01">学院</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="collegename">
                                <option value="文法学院">文法学院</option>
                                <option value="工商管理学院">工商管理学院</option>
                                <option value="国际教育学院">国际教育学院</option>
                                <option value="信息工程学院">信息工程学院</option>
                                <option value="物流与电商学院">物流与电商学院</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" v-if="collegename === ''">
                            <label class="input-group-text" for="inputGroupSelect01">班级</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="classname">
                                <option value="家政01班">请选择学院</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" v-if="collegename === '文法学院'">
                            <label class="input-group-text" for="inputGroupSelect01">班级</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="classname">
                                <option value="家政01班">家政01班</option>
                                <option value="网络与新媒体01班">网络与新媒体01班</option>
                                <option value="知识产权01班">知识产权01班</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" v-if="collegename === '工商管理学院'">
                            <label class="input-group-text" for="inputGroupSelect01">班级</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="classname">
                                <option value="工程造价01班">工程造价01班</option>
                                <option value="工商管理01班">工商管理01班</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" v-if="collegename === '国际教育学院'">
                            <label class="input-group-text" for="inputGroupSelect01">班级</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="classname">
                                <option value="ACCA01班">ACCA01班</option>
                                <option value="大数据01班">大数据01班</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" v-if="collegename === '信息工程学院'">
                            <label class="input-group-text" for="inputGroupSelect01">班级</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="classname">
                                <option value="软件01班">软件01班</option>
                                <option value="软件02班">软件02班</option>
                                <option value="物联网01班">物联网01班</option>
                                <option value="物联网02班">物联网02班</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" v-if="collegename === '物流与电商学院'">
                            <label class="input-group-text" for="inputGroupSelect01">班级</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="classname">
                                <option value="电子商务01班">电子商务01班</option>
                                <option value="电子商务02班">电子商务02班</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入昵称" v-model="nickname">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入头像地址" v-model="photo">
                        </div>
                        <div class="error_message">{{ error_message }}</div>
                        <button type="button" class="btn btn-success" @click="submit">确认提交</button>
                        <button type="button" class="btn btn-danger" @click="to_cancel">取消更改</button>
                    </div>
                </div>
            </div>
        </div>
    </UserView>
</template>

<script>
import UserView from '@/components/UserView.vue';
import { useStore } from 'vuex';
import { ref } from 'vue';
import $ from 'jquery';
import { useRouter } from 'vue-router';
export default {
    name: "UserInfoView",
    components: {
        UserView,
    },
    setup() {
        const collegename = ref('');
        const classname = ref('');
        const photo = ref('');
        const nickname = ref('');
        const to_modifyed = ref(false);
        const store = useStore();
        const error_message = ref('');
        const to_safetied = ref(false);
        const new_password = ref('');
        const new_password_confirm = ref('');
        const new_old_password = ref('');
        const error_info = ref('');
        const router = useRouter();
        const to_cancel = () => {
            to_modifyed.value = false;
        }
        const to_cancel_safe = () => {
            to_safetied.value = false;
        }
        const to_modify_info = () => {
            to_modifyed.value = true;
        }
        const submit = () => {
            $.ajax({
                url: 'http://47.121.28.202:8000/settings/studentlist/',
                type: "PATCH",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    user_id: store.state.user.id,
                    collegename: collegename.value,
                    classname: classname.value,
                    nickname: nickname.value,
                    photo: photo.value,
                },
                success(resp) {
                    if (resp.result === "success") {
                        to_modifyed.value = false;
                        router.push({
                            name: 'login',
                        })
                    }
                    else {
                        error_message.value = resp.result;
                    }
                }
            })
        }
        const to_safety = () => {
            to_safetied.value = true;
        }
        const confirm_to_safety = () => {
            error_info.value = "";
            $.ajax({
                url: "http://47.121.28.202:8000/settings/register/",
                type: "PATCH",
                data: {
                    user_id: store.state.user.id,
                    new_old_password: new_old_password.value,
                    old_password: store.state.user.password,
                    new_password: new_password.value,
                    new_password_confirm: new_password_confirm.value,
                },
                success(resp) {
                    if(resp.result === "success") {
                        store.commit("logout");
                        router.push({
                            name: 'login',
                        })
                    }
                    else {
                        error_info.value = resp.result;
                    }
                }
            })
        }
        error_message.value = "";
        return {
            collegename,
            classname,
            to_modifyed,
            photo,
            nickname,
            to_modify_info,
            error_message,
            submit,
            to_cancel,
            to_safety,
            to_safetied,
            to_cancel_safe,
            new_password,
            new_password_confirm,
            new_old_password,
            confirm_to_safety,
            error_info
        }
    }
}
</script>

<style scoped>
.btn-success {
    width: 100%;
}
.flex-container {
    display: grid;  
    grid-template-columns: auto 1fr;   
    align-items: center;
    margin-top: 20px;
}
.flex-container-item {
    margin-right: 10px;
}
.btn-danger {
    width: 100%;
    margin-top: 20px;
}
.error_message {
    color: red;
    font-weight: 1000px;
}
.btn-warning {
    width: 100%;
    margin-top: 20px;
}
.btn-info {
    width: 100%;
}
.error_info {
    color: red;
    font-weight: 1000px;
}
</style>